<template>
	<div class="zs-table-page-container" v-loading="isLoading">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<span>
				<!-- <el-select v-model="currentDate" class="zs-select-md zs-space-right-sm" placeholder="报告类型" clearable>
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select> -->
				<el-select v-model="moduleName" class="zs-select-md zs-space-right-sm" placeholder="模块名称" clearable
					filterable>
					<el-option v-for="(item, i) in moduleNameList" :key="i" :label="item" :value="item" />
				</el-select>
				<el-select v-model="reportName" class="zs-select-md zs-space-right-sm" placeholder="报表名称" clearable
					filterable>
					<el-option v-for="(item, i) in reportNameList" :key="i" :label="item" :value="item" />
				</el-select>
				<el-button class="zs-btn-plain" @click="getTableData"> 查询 </el-button>
			</span>
		</div>
		<div class="zs-card zs-table-page-content">
			<el-table class="zs-tabel-page-main-no-footer" :data="tableData" :stripe="true" :border="false">
				<el-table-column label="序号" width="60" :align="'center'">
					<template #default="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column prop="moduleName" label="模块名称" :align="'left'" show-overflow-tooltip />
				<el-table-column prop="reportName" label="报表名称" :align="'left'" show-overflow-tooltip />
				<el-table-column prop="reportTime" label="时间" :align="'left'" show-overflow-tooltip />
				<el-table-column prop="commitUserName" label="提报人" :align="'left'" show-overflow-tooltip />
				<el-table-column prop="commitTime" label="提报时间" :align="'left'" show-overflow-tooltip />
				<el-table-column label="操作" width="150" :align="'center'">
					<template #default="{ row }">
						<!-- 打开抽屉 -->
						<el-button class="zs-link" link size="small" @click="openDrawer('info', row)"
							v-if="row.displayQueryButton && !row.docFlag" :disabled="!row.queryPermission">查看</el-button>
						<!-- 查看在线word -->
						<el-button class="zs-link" link size="small" @click="previewWord(row)"
							v-if="row.displayQueryButton && row.docFlag" :disabled="!row.queryPermission">查看</el-button>
						<el-divider direction="vertical" v-if="row.displayQueryButton && row.displayModifyButton" />
						<el-button class="zs-link" link size="small" @click="openDrawer('edit', row)"
							v-if="row.displayModifyButton" :disabled="!row.modifyPermission">编辑</el-button>
						<el-divider direction="vertical" v-if="row.displayModifyButton && row.displayImportButton" />
						<el-button class="zs-link" link size="small" @click="handleOpenImportDrawer(row)"
							v-if="row.displayImportButton" :disabled="!row.importPermission">导入</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
	<hsImportData ref="importRef" v-if="isShowImportDrawer" :isShow="isShowImportDrawer" @clickImportBtn="importFile"
		@close="closeImportDrawer" @download="handleDownload" />
	<!-- 各种编辑查看的drawer -->
	<component v-for="(componentName, index) in componentNames" :is="componentMap[componentName]" :key="index"
		:ref="componentName" :isShow="drawer[componentName].isShowDrawer" :isReadOnly="drawer[componentName].isReadOnly"
		:handleType="drawer[componentName].handleType" :currentRow="currentRow" @close="closeDrawer($event, componentName)">
	</component>
</template>
<script setup>
import { getSettlementReportDetailApi, getModuleOrReportsApi, commonImpTemplateExcelApi } from "@/api/SpecialReport/settlementReport"
import { previewFile, downloadOpenFileUrl } from '@/utils/publicUtils'
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router'
import { ref, reactive } from 'vue';
const route = useRoute().query
const isLoading = ref(false);

const reportId = ref(route.id)
const permissionKey = ref(route.permissionKey)
const moduleName = ref('')
const moduleNameList = ref([])
const reportName = ref('')
const reportNameList = ref([])

//组件注册
const components = require.context('./drawer', false, /\.vue$/);
const drawer = reactive({});
const componentMap = {};
const componentNames = [];
components.keys().forEach(fileName => {
	const componentName = fileName.replace('./', '').replace('.vue', '');
	componentMap[componentName] = components(fileName).default;
	componentNames.push(componentName);
	drawer[componentName] = {
		handleType: '',
		isReadOnly: false,
		isShowDrawer: false,
	};
});

// 抽屉相关
let currentRow = ref(null);
const openDrawer = (handleType, row) => {
	drawer[row.confKey].isReadOnly = handleType == 'info' ? true : false;
	drawer[row.confKey].isShowDrawer = true;
	drawer[row.confKey].handleType = handleType;
	currentRow.value = row;
};
const closeDrawer = (data, drawerType) => {
	drawer[drawerType].isShowDrawer = data.isShow;
	data.isRefresh && getTableData();
};
const tableData = ref([]);

const getTableData = () => {
	getSettlementReportDetailApi({ reportId: reportId.value, moduleName: moduleName.value, reportName: reportName.value, permissionKey: permissionKey.value }).then((res) => {
		if (res.data.code == 200) {
			tableData.value = res.data.data
		}
	})
};
const getModuleNameList = (type) => {
	getModuleOrReportsApi({ reportId: reportId.value, type: type }).then((res) => {
		if (res.data.code == 200) {
			type == 1 ? moduleNameList.value = res.data.data :
				type == 2 ? reportNameList.value = res.data.data : ''
		}
	})
}

getTableData();
getModuleNameList(1)
getModuleNameList(2)

function previewWord(row) {
	previewFile(row.confKey)
}


const curRow = ref({})
// 导入
let importRef = ref();
let isShowImportDrawer = ref(false);

function handleOpenImportDrawer(row) {
	console.log(row);
	curRow.value = row
	isShowImportDrawer.value = true;
}
function importFile(params) {
	isLoading.value = true;

	let param = new FormData();
	params.forEach(el => {
		param.append("file", el.file);
	})
	param.append('reportDetailId', curRow.value.id)

	commonImpTemplateExcelApi(param).then(res => {
		if (res.data.code == 200 && res.data.data) {
			ElMessage({
				message: '导入成功',
				type: 'success',
			});
		}else {
			ElMessage({
				message: '导入失败，请联系管理员',
				type: 'warning',
			});
		}
		isShowImportDrawer.value = false
		isLoading.value = false
	})
}
function closeImportDrawer() {
	isShowImportDrawer.value = false;
}
// 导出
async function handleDownload() {
	downloadOpenFileUrl(`${process.env.VUE_APP_BASE_API_ZK}/portal-server/v1/api/settlementReport/commonDownloadTemplateExcel?confKey=${curRow.value.confKey}`)
}
</script>

<style scoped lang="scss"></style>
